<template>
  <s-layout navbar="inner" :onShareAppMessage="shareInfo">
    <!-- 头部盒子 -->
    <view class="background" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user/bg_renwuliebiao.png)`, paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
      <scroll-view :style="{ height: 'calc(100vh - (' + (safeAreaInsets?.top + 44) + 'px) - 212rpx - 154rpx)' }" scroll-y class="data_area comprehensive"  @scrolltolower='listScrolltolower' v-if="scheduleList.length"  
        show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll">

        <view class="area list" v-for="(item,index) in scheduleList" :key="index">
          <view class="item" >
            <view class="item_name">
              <view class="name_title nowrap">{{ item.title }}</view>
              <view class="particulars" @tap="lookdetails(item)">查看详情 > </view>
            </view>
            <view class="item_pub">
              <image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinterview_icon_location@2.png`" mode="scaleToFill"/>
              <view class="nowrap">{{ item.address }}</view>
            </view>
            <view class="item_pub">
              <image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinvite_icon_time.png`" mode="scaleToFill"/>
              <view class="gray">{{ item.date }}</view>
            </view>
            <view class="item_pub">
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/renwuliebiao_icon_renshu@2.png`" mode="scaleToFill"/>
              <view class="gray">
                人数：
                <view class="gray_left"><view class="gray_blue">{{ item.man_apply_total }}</view>/<view class="gray_black">{{ item.man_num }}</view><view class="gender">(男)</view></view>
                <view class="gray_right"><view class="gray_orange">{{ item.woman_apply_total }}</view>/<view class="gray_black">{{ item.woman_num }}</view><view class="gender">(女)</view></view>
              </view>
            </view>
            <view class="item_pub">
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/renwuliebiao_icon_xinzi@2.png`" mode="scaleToFill"/>
              <view class="gray">
                薪资：
                <view class="gray_left"><view class="gray_blue">￥ {{ item.man_salary }}</view><view class="gender">(男)</view></view>
                <view class="gray_right"><view class="gray_orange">￥ {{ item.woman_salary }}</view><view class="gender">(女)</view></view>
              </view>
            </view>

            <view class="item_pub" v-if="item.can_share">
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/renwuliebiao_icon_xinzi@2.png`" mode="scaleToFill"/>
              <view class="gray">
                代理商金额：
                <view class="gray_left"><view class="gray_blue">￥ {{ item.agent ? item.agent.agent_man_salary_max : item.agent_man_salary }}</view><view class="gender">(男)</view></view>
                <view class="gray_right"><view class="gray_orange">￥ {{ item.agent ? item.agent.agent_woman_salary_max : item.agent_woman_salary }}</view><view class="gender">(女)</view></view>
              </view>
            </view>

            <view class="Agency_amount_box" v-if="item.can_share">
                <view class="left_box">
                <view :class="!item.agent || (item.agent && item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0) ? 'Is_not_set' : 'have_set'">
                  {{ !item.agent || (item.agent && item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0) ? '未设置' : '已设置' }}
                </view>
                <view class="image">
                  <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jine@2.png`" mode="scaleToFill"/>
                </view>
                <view class="caption_text">代招工金额(男/女)：</view>
                <view class="money">

                    <text v-if="!item.agent">
                    ￥{{ item.agent_man_salary }}
                    </text>
                    <text v-else>
                    <template v-if="item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0">
                        ￥{{ item.agent.agent_man_salary_max }}
                    </template>
                    <template v-else>
                        ￥{{ item.agent.agent_man_salary }}
                    </template>
                    </text>
                    /
                    <text v-if="!item.agent">
                    ￥{{ item.agent_woman_salary }}
                    </text>
                    <text v-else>
                    <template v-if="item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0">
                        ￥{{ item.agent.agent_woman_salary_max }}
                    </template>
                    <template v-else>
                        ￥{{ item.agent.agent_woman_salary }}
                    </template>
                    </text>

                </view>
                </view>
                <view class="right_box" @tap.stop="change_agent_amount(item)" v-if="item.state <= 1">
                <view class="image">
                    <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jinexiugai@2.png`" mode="scaleToFill"/>
                </view>
                <view class="edit_box">修改</view>
                </view>
            </view>



            <view class="item_pub">
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/Myinvite_icon_time备份@2.png`" mode="scaleToFill"/>
              <view class="blue">用工需求</view>
            </view>
            <view class="demand" v-if="item.show">
                <fui-overflow-hidden  :size="24" color="#333333" type="2" gradientColor="#FFFFFF"
                :height="height_hidden" :visible="item.visible">
                <view class="u-content" >
                  <u-parse :content="item.demand" :show-with-animation="true"></u-parse>
                </view>
                </fui-overflow-hidden>
                <view class="open"  @click="readMore(item)">{{ item.visibletitle }}<fui-icon :name="item.icon" color="#333"
                size="24"></fui-icon></view> 
                
            </view>
            <view class="demand" v-else>
              <u-parse :content="item.demand" :show-with-animation="true"></u-parse>
            </view>
                <view :class="(user_id == item.user_id && item.can_share) ? 'item_me' : 'item_bottom'">
                <view class="item_bottom_left" v-if="!(user_id == item.user_id && item.can_share)">
                    <image :src="`${baseUrl}`+item.user.avatar" mode="scaleToFill"/>
                    <view class="names">
                    <view class="nowrap">{{ item.contact_name }}</view>
                    </view>
                </view>
                <view class="item_bottom_right" @tap="check_sign_up(item)" v-if="user_id == item.user_id">
                    <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming@2.png`" mode="scaleToFill"/>
                    <up-text text="查看接单"  color="#0038F7" size="26rpx" bold="true"></up-text>
                </view>
                <view class="item_bottom_right" @tap="onShareGoods(item)" v-if="item.can_share">
                    <image :src="`${baseUrl}/uploads/uniapp_image/user/renwuliebiao_icon_share.png`" mode="scaleToFill"/>
                    <up-text text="分享招人"  color="#FF6600" size="26rpx" bold="true"></up-text>
                </view>
                <view class="item_bottom_right" v-if="item.is_apply == 0" @tap="callup(item)">
                  <image v-if="item.is_apply" :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming2@2.png`" mode="scaleToFill"/>
                  <image v-else :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming@2.png`" mode="scaleToFill"/>
                  <up-text :text="item.is_apply ? '已接单' : '立即接单'" :color="item.is_apply ? '#808080' : '#0038F7'" size="26rpx" bold="true"></up-text>
              </view>
              <view class="item_bottom_right" v-else>
                  <image v-if="item.is_apply" :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming2@2.png`" mode="scaleToFill"/>
                  <image v-else :src="`${baseUrl}/uploads/uniapp_image/user_v1/jiedanbaoming_icon_baoming@2.png`" mode="scaleToFill"/>
                  <up-text :text=" '已接单'" :color="item.is_apply ? '#808080' : '#0038F7'" size="26rpx" bold="true"></up-text>
              </view>
                </view>

            </view>
        </view>
                <!-- 正在加载组件 -->
        <view>
          <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
        </view>
      </scroll-view>
      <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="30%"  marginBottom="20%"></u-empty>
      <fui-dialog :show="order_show" :content="order_content" maskClosable @click="order_click" @close="order_close"></fui-dialog>
    </view>
    <!-- 全局授权弹窗 -->
		<s-auth-modal />
    <!-- 设置金额弹出层 -->
    <s-public-models
      :show="popshows" 
      :imagesucceedSrc="dataToinformaion.imageSrc" 
      :subtitle="dataToinformaion.subtitle"  
      :hint="dataToinformaion.hint" 
      :editAgency="true"
      @cancel="manhourClose" 
      @affirm="manhourSubmit"
      :click_type="dataToinformaion.click_type" :list="edit_list">
    </s-public-models>
    <!-- <view class="placeholder"></view> -->
  </s-layout>
</template>

<script setup>
  import { onLoad , } from "@dcloudio/uni-app";
  import { onMounted, ref,computed } from "vue";
  import tools from '@/sheep/helper/tools.js';
  import { baseUrl } from "@/sheep/config";
  import sheep from '@/sheep';
  import { showShareModal,showAuthModal } from '@/sheep/hooks/useModal';
  const { safeAreaInsets } = uni.getSystemInfoSync()
  sheep.$store('user').userInfo.group_id;
  const user_id = sheep.$store('user').userInfo.id

  onLoad((options) => {
    listpagenumber.value = 1;
    scheduleList.value = []
    getScheduleTaskList()
  
  })
  const share =ref({
    title:'',
    address:'',
    date:'',
    id:''
  })
  //查看详情
  const lookdetails = (item) => {     
  
        sheep.$router.go('/subpackage/user/task/task_details',{
            id: item.id,
            title:'任务'
        });
    }
//展开列表
 const height_hidden = ref()
 const readMore = (item)=> {
		  if(item.visible == false){
        item.visible = true
        item.icon = 'turningup'
        item.visibletitle = '收起列表'
      }else{
        item.visible = false
        item.icon = 'turningdown'
        item.visibletitle = '展开列表'
      }
     
			
}


  // /移除HTML标签
  const delTag = (str) =>{
    return str.replace(/<[^>]+>/g,"");
  }
  //分享招人
  const onShareGoods = (item) => {
    let htmlContent =  delTag(item.demand)
    share.value.title = item.title
    share.value.address = item.address
    share.value.id = item.id
    share.value.date = item.date+' '+item.start_time+'--'+item.end_time
    share.value.employeeNeeds = htmlContent
    showShareModal();
  }

  // 查看接单
  const check_sign_up = (item) => {
    sheep.$router.go('/subpackage/user/task/order_registration_details', {
    id: item.id
  })
  }

  const shareInfo = computed(() => {
    // if (isEmpty(state.value.data)) return {};
    return sheep.$platform.share.getShareInfo(
      {
        title:  share.value.title,
        desc:  share.value.address,
        params: {
          page: '3',
          query:share.value.id
        },
      },
      {
        type: 'clock_in', // 商品海报
        title: share.value.title,
        desc:  share.value.address,
        signUpTime: share.value.date,
        employeeNeeds: share.value.employeeNeeds,
      },
    );
  });

  // 对话框逻辑
  const order_show = ref(false)
  const order_content = ref('是否确认接单？')
    // 确认
  const order_click = (e) => {
    if(e.text == '确定') {
      uni.$u.throttle(() => {
        // #ifdef MP
        sheep.$platform.useProvider('wechat').subscribeMessage('task_apply_notice');
        // #endif
        let params = {
          schedule_id:schedule_id.value,
          share_id:share_id.value
        }
        sheep.$api.project.postScheduleUserAdd(params).then(res => {
          sheep.$helper.toast(res.msg);
          if(res.code == 1) {
            listpagenumber.value = 1;
            scheduleList.value = []
            getScheduleTaskList()
          }
        })
      }, 1000);
    }
    order_close()
  }
  // 点击遮罩
  const order_close = () => {
    order_show.value = false
  }
  // 立即接单
  const schedule_id = ref()
  const share_id = ref()
  const callup =(item)=>{
    order_show.value = true
    schedule_id.value = item.id
    share_id.value = item.user_id
  }

  // 数据请求
  // 明天日期
  const now = new Date();
  const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
  const  tomorrowDate = `${tomorrow.getFullYear()}-${(tomorrow.getMonth() + 1).toString().padStart(2, '0')}-${tomorrow.getDate().toString().padStart(2, '0')}`
  const listPage = ref()
  const listlast_page = ref()
  const listpagenumber = ref(1)
  const scheduleList = ref([])
  
  const getScheduleTaskList = async () => {
    let params = {
      filter: JSON.stringify({
          date:tomorrowDate+','+ new Date().toISOString().slice(0, 10),
          state:"0,1"
      }),
      op: JSON.stringify({
          date: 'in',
          state: 'in',
      }),
      type:'agent_list',
      page:listpagenumber.value
    }
    const res = await sheep.$api.project.getScheduleTaskList(params);
    if(res.code == 1) {
      scheduleList.value = [...scheduleList.value, ...res.data.rows];
      scheduleList.value.forEach(item=>{
        const count_length = (item.demand.match(/<\/p>/g) || []).length;
        if(count_length > 3 || item.demand.length > 82){
          item.visible = false,
          item.show = true
          item.visibletitle ='展开列表'
          item.icon = 'turningdown'
          height_hidden.value = '110rpx'
        }else{
          item.show = false
        }
        
      
      })
   

      listPage.value = res.data.current_page
      listlast_page.value = res.data.last_page
    }
  };
  //滚动触底
  const loadmoreRef = ref()
  const listScrolltolower = () => {
    loadmoreRef.value.PopupScrolltolower()
    if (listPage.value < listlast_page.value) {
      listpagenumber.value += 1;
    } else {
      return;
    }
    getScheduleTaskList();
  };

  // 页面下拉刷新
  const freshing = ref(false)
  const triggered = ref(false)
  const isOpenRefresh = ref(true)  // 是否开启下拉
  // 自定义下拉刷新控件被下拉
  const onPulling = (e) => {
    if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
    triggered.value = true;
  }
  // 自定义下拉刷新被触发
  const onRefresh = () => {
    if (freshing.value) return;
    freshing.value = true;
    setTimeout(() => {
      listpagenumber.value = 1;
      scheduleList.value = []
      triggered.value = false;
      freshing.value = false;
      getScheduleTaskList();
    }, 500);
  }
  // 自定义下拉刷新被复位
  const onRestore = () => {
    triggered.value = 'restore'; // 需要重置
  }
  // 自定义下拉刷新被中止
    const onAbort = () => {
  }




  // 修改代理商金额
const edit_ids=ref()
  const edit_list = ref()
  const post_data = ref()
  const change_agent_amount = (e) => {
    post_data.value = e
    if(e.agent) {
      edit_list.value = e.agent
    } else {
      edit_list.value = e
    }
    edit_ids.value = e.id
    popshows.value = true
    dataToinformaion.value.click_type ='agency'
    dataToinformaion.value.subtitle = '修改代理商金额'
    dataToinformaion.value.hint =  '修改金额后会覆盖已修改的金额'
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
  }
  // 修改代理商金额
    //工时弹窗
    const popshows = ref(false)

    const dataToinformaion = ref({
        subtitle: '',
        imageSrc: '',
        hint:'',
        click_type:''
    })
    // 取消按钮
    const manhourClose = (e) =>{
        popshows.value = e
    }

    // 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
    const manhourSubmit = async(e,i,a)=> {

      if(post_data.value.agent) {
        if(e > Number(post_data.value.agent.agent_man_salary_max) || a > Number(post_data.value.agent.agent_woman_salary_max)) {
          sheep.$helper.toast('修改不能大于限制金额');
          return
        }
      } else {
        if(e > Number(post_data.value.agent_man_salary) || a > Number(post_data.value.agent_woman_salary)) {
          sheep.$helper.toast('修改不能大于限制金额');
          return
        }
      }

        let params ={
            share_id:user_id,
            schedule_id: edit_ids.value,
            agent_man_salary:e,
            agent_woman_salary:a
        }
        const res = await sheep.$api.agency.editAgentByScheduleid(params);
        if(res.code == 1){
            sheep.$helper.toast(res.msg);
            setTimeout(()=>{
              listpagenumber.value = 1;
              scheduleList.value = []
              getScheduleTaskList()
              popshows.value = false
            },500)
        } else {
            sheep.$helper.toast(res.msg);
        }
    }



</script>

<style scoped lang="scss">
page {
  width: 100%;
  height: 100%;
}

.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}

.background {
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

//内容列表
.list{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 26rpx;
  background: $uni-bg-color;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
  .item{
  padding: 40rpx 30rpx 0rpx 30rpx;
  width: 650rpx;
  .item_name{
      display: flex;
      align-items: center;
      margin-bottom: 25rpx;
      justify-content: space-between;
      .item_name_blue{
      color: $uni-color-primary;
      font-weight: 400;
      font-size:$uni-font-size-26;
      }
      .name_title{
      width: 90%;
      color: $uni-text-color;
      font-weight: 500;
      font-size: $uni-font-size-big;
      } 
  }
  .item_pub{
      display: flex;
      align-items: center;
      height: 50rpx;
      .nowrap{
      width: 90%;
      color: #666666;
      font-weight: 400;
      font-size:$uni-font-size-26;
      }
      .gray{
      width: 90%;
      color: #666666;
      font-weight: 400;
      font-size:$uni-font-size-26;
      display: flex;
      }
      .blue{
      font-family: PingFangSC;
      color: #0038F7;
      font-weight: 600;
      font-size: 26rpx;
      font-style: normal;
      text-decoration: none;
      text-align: left;
      }
      image{
      width: 28rpx;
      height: 28rpx;
      margin-right: 10rpx;
      }
  }
  .demand {
      margin-top: 20rpx;
      width: calc(100% - 40rpx);
      border-radius: 8px;
      background-color: #F8F9FF;
      padding: 20rpx;
      font-size: 24rpx;
      color: #333;
  }
  .item_bottom{
      margin-top: 20rpx;
      width: 100%;
      border-top: 1rpx solid #F4F4F4;
      display: flex;
      justify-content: space-between;
      .item_bottom_left{
      padding: 26rpx 0;
      width: 40%;
      display: flex;
      align-items: center;
      image{
          border-radius: 33rpx;
          width: 64rpx;
          height: 64rpx;
          margin-right: 16rpx;
      }
      .names {
          .nowrap{
          width: 100%;
          color: $uni-text-color;
          font-weight: 500;
          font-size:$uni-font-size-26;
          margin-bottom: 10rpx;
          }
          .text{
          color: #999999;
          font-weight: 400;
          font-size: 20rpx;
          }
      }
      }
      .item_bottom_right{
      display: flex;
      align-items: center;
      margin-right: 30rpx;
      &:first-child{
          image{
          width: 26rpx;
          height: 24rpx;
          display: flex;
          align-items: center;
          }
      }
      image{
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
          display: flex;
          align-items: center;
      }
      }
  }
  // 底部
  .item_me {
      margin-top: 20rpx;
      width: 100%;
      border-top: 1rpx solid #F4F4F4;
      display: flex;
      justify-content: space-around;
      .item_bottom_left{
      padding: 36rpx 0 34rpx 0;
      width: 40%;
      display: flex;
      align-items: center;
      image{
          border-radius: 33rpx;
          width: 64rpx;
          height: 64rpx;
          margin-right: 16rpx;
      }
      .names {
          .nowrap{
          width: 100%;
          color: $uni-text-color;
          font-weight: 500;
          font-size:$uni-font-size-26;
          margin-bottom: 10rpx;
          }
          .text{
          color: #999999;
          font-weight: 400;
          font-size: 20rpx;
          }
      }
      }
      .item_bottom_right {
      display: flex;
      align-items: center;
      padding: 36rpx 0 34rpx 0;
      &:first-child{
          image{
          width: 26rpx;
          height: 24rpx;
          display: flex;
          align-items: center;
          }
      }
      image{
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
          display: flex;
          align-items: center;
      }
      }
  }
  
  }
}

.nowrap{
  white-space: nowrap;      /* 保持文本在一行内 */
  overflow: hidden;         /* 超出容器部分隐藏 */
  text-overflow: ellipsis;
}

// 滚动容器
.comprehensive {
  margin-top: 212rpx;
}

.selected {
  background-color: #ffffff;
  color: #000000;
  font-family: PingFangSC;
  font-weight: 550;
  font-size: 32rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
}
.no_selected {
  background-color: #ECF6FF;
  color: #666666;
  font-family: PingFangSC;
  font-weight: 550;
  font-size: 32rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
}

// tabs
.tabs {
  width: 100%;
  height: 88rpx;
  margin-top: 212rpx;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 44rpx 44rpx 0 0;
  .item_tab_bac {
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  line-height: 88rpx;
  }
  .item_tab_bac:nth-child(1) {
  border-radius: 44rpx 0 0 0;
  }                
  .item_tab_bac:nth-child(2) {
  border-radius: 0 44rpx 0 0;
  }
  .item_tab {
  width: 100%;
  height: 100%;
  line-height: 88rpx;
  position: relative;
  }

  .left {
  border-radius: 44rpx 44rpx 0rpx 0rpx;
  }
  .right {
  border-radius: 0rpx 44rpx 0rpx 44rpx;
  }
  
  .base {
  position: absolute;
  // top: 50%;
  bottom: 14rpx;
  right: 45%;
  left: 45%;
  width: 40rpx;
  height: 8rpx;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }
}

.placeholder {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 246, 250, 1) 100%);
  height: 22rpx;
}

// 新增： 人数 薪资
.gray_left {
  margin-right: 50rpx;
  display: flex;
  align-items: center;
}

// .gray_Agents_amount {

// }

.gray_right {
  display: flex;
  align-items: center;
}

.gray_blue {
  margin-right: 10rpx;
  color: #0038f7;
  font-weight: 550;
}
.gray_orange {
  margin-right: 10rpx;
  color: #ff6600;
  font-weight: 550;
}
.gray_black {
  margin-left: 10rpx;
  margin-right: 5rpx;
  font-weight: 550;
  color: #333333;
}
.gender {
  font-size: 24rpx;
  margin-left: 5rpx;
}


// 代理金额盒子
.Agency_amount_box {
font-family: PingFangSC;
display: flex;
text-align: center;
align-items: center;
justify-content: space-between;
border-radius: 4px;
  background-color: #F9FBFF;
height: 52rpx;
.left_box {
  display: flex;
  align-items: center;
  .caption_text {
  color: #333333;
  font-size: 22rpx;
  font-weight: 500;
  }
  .money  {
  color: #FF0000;
  font-size: 22rpx;
  font-weight: 600;
  }
  .image {
  margin-left: 12rpx;
  width: 24rpx;
  height: 24rpx;
  display: flex;
  align-items: center;
  margin-right: 12rpx;
  image {
      width: 100%;
      height: 100%;
  }
  }
}
.right_box {
  display: flex;
  align-items: center;
  margin-right: 10rpx;
  .edit_box {
  font-family: PingFangSC;
  color: #0038F7;
  font-weight: 500;
  font-size: 22rpx;
  font-style: normal;
  text-decoration: none;
  text-align: left;
  }
  .image {
  width: 24rpx;
  height: 24rpx;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
  image {
      width: 100%;
      height: 100%;
  }
  }
}
}

// 已设置
.have_set {
font-family: PingFangSC;
color: #0038F7;
font-weight: 400;
font-size: 20rpx;
font-style: normal;
text-decoration: none;
text-align: center;
border-radius: 4px;
background-color: #FFFFFF;
border: 1px solid #0038F7;
width: 70rpx;
height: 28rpx;
}

// 未设置
.Is_not_set {
font-family: PingFangSC;
color: #FFFFFF;
font-weight: 400;
font-size: 20rpx;
font-style: normal;
text-decoration: none;
text-align: center;
border-radius: 4px;
background-color: #FF5100;
width: 70rpx;
height: 28rpx;
}
.open {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  font-weight: 400;
  font-size: 24rpx;
  }
  .particulars {
      width: 120rpx;
      font-family: PingFangSC;
      color: #0038F7;
      font-weight: 400;
      font-size: 22rpx;
      font-style: normal;
      text-decoration: none;
      text-align: center;
  }

  .placeholder {
    height: 154rpx;
  }
</style>